import React, {Component} from 'react'
import {connect} from 'react-redux'
import {List, Badge} from 'antd-mobile'

const Item = List.Item;
const Brief = Item.Brief;

class Message extends Component {

  getLastMsgs = (chatMsgs,userid) => {
    // 1.找出每个聊天的lastMsg，并用一个对象容器来保存{chat_id:lastMsg}
    const lastMsgObjs = {};
    chatMsgs.forEach(msg => {
      // 对msg进行个体的统计
      if(msg.to === userid && !msg.read){
        msg.unReadCount = 1;
      }else {
        msg.unReadCount = 0;
      }

      // 得到msg的聊天标识id
      const chatId = msg.chat_id;
      // 获得已保存的当前组件的lastMsg
      let lastMsg = lastMsgObjs[chatId];
      if (!lastMsg) { // 没有，当前msg就是所在组的lastMsg
        lastMsgObjs[chatId] = msg
      } else {   // 有，比较时间谁更晚
        // 累加unReadCount = 已统计的+当前msg的
        const unReadCount = lastMsg.unReadCount + msg.unReadCount;
        if (msg.create_time > lastMsg.create_time) {
          lastMsgObjs[chatId] = msg;
        }
        // 将unReadCount保存在最新的lastMsg上
        lastMsgObjs[chatId].unReadCount = unReadCount
      }
    });
    // 2. 得到所有lastMsg的数组
    const lastMsgs = Object.values(lastMsgObjs);
    // 3. 对数组进行排序(按create_time排序)
    lastMsgs.sort(function (m1, m2) { //如果结果为0，将m1放在前面
      return m2.create_time - m1.create_time
    });
    return lastMsgs
  };

  render() {

    const {user} = this.props;
    const {users, chatMsgs} = this.props.chat;

    // 对chatMsg 按chat_id进行分组，取最后一条msg
    const lastMsgs = this.getLastMsgs(chatMsgs,user._id);

    return (
        <List style={{marginTop: 45, marginBottom: 44}}>
          {
            lastMsgs.map(msg => {
              const targetUserId = msg.to === user._id ? msg.from : msg.to;
              const targetUser =  users[targetUserId];
              return (
                  <Item
                      key={msg._id}
                      extra={<Badge text={msg.unReadCount}/>}
                      thumb={targetUser.header ? require(`../../assets/images/${targetUser.header}.png`) : null}
                      arrow='horizontal'
                      onClick={() => this.props.history.push(`/chat/${targetUserId}`)}
                  >
                    {msg.content}
                    <Brief>{targetUser.username}</Brief>
                  </Item>
              )
            })
          }
        </List>
    )
  }
}

export default connect(
    state => ({user: state.user, chat: state.chat}),
    {}
)(Message)